<template>
	<scroll-view class="secondary" scroll-x>
		<view class="category">
			<navigator class="category-item" hover-class="none" url="/pages/index/index" v-for="item in categories.splice(0,10)"
				:key="item.id">
				<image class="icon"
					:src="item.image">
				</image>
				<view>
					<text class="text">{{item.name}}</text>
				</view>

			</navigator>
		</view>
	</scroll-view>
	
</template>
<script setup lang="ts">
	import {ref} from 'vue';
	import type { CategoryVo } from '@/api/category/types.ts';
	defineProps<{ categories : CategoryVo[] }>();
	
</script>
<style lang="scss" scoped>
	.secondary {
		height: 330rpx;
	}

	/* 前台类目 */
	.category {
		margin: 20rpx 0 0;
		padding: 10rpx 0;
		display: flex;
		flex-wrap: wrap;
		min-height: 328rpx;

		.category-item {
			width: 150rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
</style>